<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../js/controller/loader.js"></script>
<body onload="initcomponents();">

	<div style="position: relative;">
		<canvas id="grid" width="600" height="600"
			style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
		<canvas id="tshirt" width="600" height="600"
			style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
		<canvas id="graph" width="450" ondrop="drop(event)"
			ondragover="allowDrop(event)" height="450" ondrop="drop(event)"
			ondragover="allowDrop(event)"
			style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
	</div>


	<div class="accordion"
		style="float: left; margin-left: 600px; background: #EEEEEE; height: 600px; width: 250px;">

		<div class="header-accordion">
			<a href="">Texts</a>
		</div>
		<div class="content-accordion">

			<div class="control-group">
				<label class="control-label" for="inputText">Text</label>
				<div class="controls">
					<input type="text" id="inputText" placeholder="Text">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="input-size">Size <span
					id="outputSize"
					style="border: 0; color: #f6931f; font-weight: bold;"></span></label>
				<div class="controls">
					<div id="input-size"></div>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="color-group">Color</label>
				<div class="controls">
					<div id="color-group">
						<div id="input-color-red"></div>
						<div id="input-color-green"></div>
						<div id="input-color-blue"></div>
						<div id="input-color" class="ui-widget-content ui-corner-all"></div>
					</div>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="inputSize">Font</label>
				<div class="controls">
					<select id="inputFont">
						<option>Yesteryear</option>
						<option>Henny Penny</option>
					</select>
				</div>
			</div>

			<div style="text-align: center">
				<button id="insertButton" class="btn btn-primary" type="button"
					onclick="insertText();">Insert</button>
			</div>
		</div>

		<div class="header-accordion">
			<a href="">Images</a>
		</div>
		<div class="content-accordion">
			<img id="drag1"
				src="%3D"
				draggable="true" ondragstart="drag(event)" width="106" height="69">
		</div>

		<div class="header-accordion">
			<a href="">Options</a>
		</div>
		<div class="content-accordion">
			<div style="text-align: center">
				<button id="saveButton" class="btn btn-primary" type="button"
					onclick="saveText();">Save</button>
			</div>
		</div>



	</div>


</body>
</html>